<template>
  <div class="app-container">
    <div class="el-row mb8" style="margin-left: -5px; margin-right: -5px">
      <div
        class="el-col el-col-1.5 is-guttered"
        style="padding-left: 5px; padding-right: 5px"
      >
        <el-button type="primary" plain icon="Plus">新增</el-button>
      </div>
      <div
        class="el-col el-col-1.5 is-guttered"
        style="padding-left: 5px; padding-right: 5px"
      >
        <el-button type="success" plain icon="Edit">修改</el-button>
      </div>
      <div
        class="el-col el-col-1.5 is-guttered"
        style="padding-left: 5px; padding-right: 5px"
      >
        <el-button type="danger" plain icon="Delete">删除</el-button>
      </div>
      <div
        class="el-col el-col-1.5 is-guttered"
        style="padding-left: 5px; padding-right: 5px"
      >
        <el-button type="warning" plain icon="Download">导出</el-button>
      </div>
      <div class="top-right-btn">
        <div class="el-row">
          <el-button :icon="Search" circle />
          <el-button :icon="Refresh" circle />
        </div>
      </div>
    </div>
    <div>
      <el-tag type="primary">待处理任务列表</el-tag>
      <el-table :data="tableData" style="width: 100%; text-align: center">
        <el-table-column type="selection" width="55" />
        <el-table-column label="客户姓名">
          <template #default="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column property="phone" label="手机号码" />
        <el-table-column
          property="channelName"
          label="渠道名称"
          show-overflow-tooltip
        />
        <el-table-column property="activityName" label="活动名称" />
        <el-table-column property="courseName" label="课程名称" />
        <el-table-column property="contractPrice" label="合同金额" />
        <el-table-column label="操作" width="350px">
          <template #default="scope">
            <el-button
              @click="handleEdit(scope.$index, scope.row)"
              icon="View"
              type="primary"
              link
            >
              查看
            </el-button>
            <el-button
              type="primary"
              link
              @click="handleDelete(scope.$index, scope.row)"
              icon="Document"
            >
              预览
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[10, 20, 30, 50]"
          :size="size"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <div class="el-divider el-divider--horizontal"></div>
    <div>
        
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Search, Refresh } from "@element-plus/icons-vue";
import { getUnapprove } from "../../../api/contract";
import { ref } from "vue";
import type { ComponentSize } from "element-plus";

const tableData = ref<any[]>([]);
const currentPage4 = ref(1);
const pageSize4 = ref(10);
const size = ref<ComponentSize>("default");
const background = ref(true);
const disabled = ref(false);

const total = ref(1);

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};

const getUnapproves = async () => {
  const res: any = await getUnapprove();
  console.log(res);
  if (res.code == 200) {
    tableData.value = res.rows;
    total.value = res.total
  }
};
getUnapproves();
</script>

<style lang="scss" scoped>
// .app-container{
//     padding: 20px;
// }
.centered-table {
  margin: 0 auto; /* 水平居中 */
  display: block; /* 确保 margin 生效 */
  max-width: 1200px; /* 可选：限制表格最大宽度 */
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.pagination-container {
    margin-top: 30px;
    padding: 10px 20px !important;
}
</style>
